pp108 : Selectors in Cascading Style Sheets

Selectors in Cascading Style Sheets

This topic describes all selectors used in the cascading style sheets in Process Platform.


The following table lists the selectors available indefault.cssandxdefault.css. A style sheet for which a selector is available is marked using 'x'.

The selectors are listed in the cascade order in which they occur in the style sheets. While customizing a style sheet, maintain the cascade order of selectors to prevent errors.

Table 1. Selectors in Cascading Style Sheets

Selector Name

Description

default.css

xdefault.css

body

HTML tag that specifies the start and end of the document body. This tag defines font size, font color, and background color for the entire document, and is inherited by controls subject to control properties.

x

x

table

HTML tag that specifies properties for a Table control. It is used indefault.cssto set the font size to 100% as the table object does not inherit font size correctly.

x

button

HTML tag that specifies the properties of the Button control.

x

.input

Class selector used for editable elements that receive user input from the keyboard. It is always marked in white color for easy identification and recall of input-ready areas.

x

textarea

HTML tag that specifies the properties of the Textarea control.

x

.light

Class selector applicable to menus, odd-numbered rows in grids in Process Platform interfaces, secondary windows (such as dialog boxes, error messages, and wizards), and background color.

x

.lightmedium

Class selector applicable to even-numbered rows in a grid, inactive tab backgrounds, and button color of select boxes.

x

.medium

Class selector applicable to buttons, grid headers, and background color of toolbar-pressed items.

x

.mediumdark

Class selector applicable to grid footers, inactive applications, section headers, and context-menu items in a tree.

x

.dark

Class selector applicable to application headers.

x

.navbody

Class selector applicable to the navigational elements, such as the default tree menu.

x

.mainbody

Class selector applicable to the default container in Process Platform application pages. This is almost always similar to the body tag in presentational properties.

x

.toolbar

Class selector applicable to the application toolbar in Process Platform application pages.

x

.outfocus

Class selector applicable to a tree node when it is selected, but not focused.

x

.docked

Class selector applicable to the Process Platform Application Container when it is docked. It affects the appearance of the area around the Application Container in the docked state.

x

.undocked

Class selector applicable to the Process Platform Application Container when it is undocked. It affects the appearance of the area around the Application Container in the undocked state.

x

.desktop

Class selector applicable to the Process Platform desktop.

x

.maincontainer

Class selector that specifies the top-level container that follows the toolbar, if present, in an XForm. You must specify the appropriate padding required. It is an invisible structural element.

x

.simplecontainer

A simple structural element that controls scrollbars and defines areas within groups. It is an invisible structural element.

x

.compositecontainer

Container for grouping controls with implementation similar to that of an HTML table. It is an invisible structural element.

x

.compositecontainerrow

Class selector that renders the rows that display in a grouping control. It is an invisible structural element.

x

.compositecontainercell

Class selector that renders the columns in a grouping control. It is an invisible structural element.

x

.h_layout

Class selector that applies a horizontal layout to contents. It is an invisible structural element.

x

.v_layout

Class selector that applies a vertical layout to the contents. It is an invisible structural element.

x

.v_layout_i

Class selector that applies a vertical layout to the contents of a Group control. It is an invisible structural element.

x

.f_layout

Class selector that applies a position-based layout, which can be used with anchors. It is an invisible structural element.

x

.fieldsbox

Class selector that serves as a container for primitive controls. It is an invisible structural element.

x

.f_layout .fieldsbox

Descendant selector that renders thefieldsboxselectors in a free layout. It is a structural construct and is invisible.

x

.f_layout .fieldsbox textarea

Descendant selector that renders the textarea of a fieldsbox in a free layout. It is a structural construct and is invisible.

x

.choicebox

Class selector that serves as a container for Check controls and their labels. It is an invisible structural element.

x

.fieldsbox .choicebox

Descendant selector that renders thechoiceboxselectors in the fieldsbox container. It is a structural construct and is invisible.

x

.elementbar

Class selector that serves as a container for buttons in control bars and pagination bars associated with controls such as Table and Groupbox. It is an invisible structural element.

x

.controlbar

Class selector that serves as a container for buttons that control actions such as insert, refresh, and delete for a given element (tables, groups, or tabs). It is an invisible structural element.

x

.paginationbar

Class selector that serves as a container for pagination buttons such as First, Previous, Next, and Last for a given element (tables, groups, or tabs). The find action is also used in the pagination bar. It is an invisible structural element.

x

.splittercontainer

Structural element that serves as a container for the splitter control.

x

.split_left

Structural element that serves as a container for the left part of the splitter control.

x

.split_right

Structural element that serves as a container for the right part of the splitter control.

x

.split_top

Structural element that serves as a container for the top part of the splitter control.

x

.split_bottom

Structural element that serves as a container for the bottom part of the splitter control.

x

.input

Class selector used for editable elements that receive user input from the keyboard. It is always marked in white color for easy identification and recall of input-ready areas.

x

input

HTML tag that specifies the properties for all input elements.

x

fieldset input

Descendant tag selector to control Check controls and radio buttons in certain migration scenarios. It is an invisible structural element and need not be customized.

x

textarea

HTML tag that specifies the properties of the Textarea control.

x

.output

Class selector that defines the position and appearance of an Output control.

x

x

label, .h_label, .v_label

Group selector that specifies the default position and appearance of a label object, horizontal label, and vertical label in an XForm, respectively.

x

x

button, .h_button, .v_button

Group selector that specifies the default appearance of a button object, horizontal button, and vertical button in an XForm, respectively.

x

.lookup

Class selector that defines the position and appearance of zoom (lookup) buttons that are positioned next to fields.

x

x

.lookup .disabled, .lookup .output

Group selector that specifies the appearance of disabled buttons and output fields in XForms that appear on using zoom controls.

x

.lookup img

Class selector that renders images inside zoom (lookup) buttons and displays the image proportionately.

x

.h_button

Class selector that defines the position of consecutive buttons arranged horizontally in a row.

x

.v_button

Class selector that defines the position of buttons that display below one another.

x

.h_image

Class selector that defines the position of consecutive images arranged horizontally in a row.

x

.v_image

Class selector that defines the position of images that display below one another.

x

.elementbar .separator

Descendant selector that defines the position of the separator in an element bar.

x

.elementbar button

Descendant selector that defines the position and appearance of buttons that are displayed in an element bar, which includes the control bar and the pagination bar.

x

x

table.groupbox

Class selector that specifies the Table control as a container for group controls. It is a structural construct and is invisible.

x

.groupbox .groupheader

Descendant selector that defines the position and appearance of headers for groups in the default state.

x

x

.groupbox .expand

Descendant selector that defines the position and appearance of headers for groups that are collapsed. The group header indicates the 'expand-now' state.

x

x

.groupbox .collapse

Descendant selector that defines the position and appearance of the headers for groups that are expanded. The group header indicates the 'collapse-now' state.

x

x

.groupcontent

Descendant selector that specifies the controls that display in a Groupbox control. It also specifies the overflow and border.

x

x

.invisiblegroupbox

Class selector that specifies the Group control for the XForm's interface. It is an invisible control.

x

.simplecontainer iframe

Descendant selector that specifies the position and appearance of the Frame control in an XForm. It does not affect the iframe UI elements used at other places across Process Platform.

x

x

.stackedtabcontainer

Class selector that specifies the position and appearance of container for vertically-stacked tabs. It is a structural element and is invisible.

x

x

.stackedtabattop

Class selector that specifies the position and appearance of buttons that display on top of vertical tab groups. It is a part of.stackedtabcontainer.

x

x

.stackedtabatbottom

Class selector that specifies the position and appearance of buttons that display at the bottom of vertical tab groups. It is a part of.stackedtabcontainer..

x

x

.stackedtabcontent

Class selector that specifies the position and appearance of tab content that display below buttons. It is a part of.stackedtabcontainer.

x

x

.tabcontainer

Class selector that defines the background of a tab container. It is set to "transparent" to display the parent container's background. If a color is specified, it overrides other background properties such as desktop color. The properties of this class selector are common for all horizontal tabs. It is an invisible structural element and contains the.tabstripattop, .tabstripatbottom, .tabcontent, .activetabattop, .activetabatbottom, .inactivetabattop, and.inactivetabatbottomclass selectors.

x

x

.tabstripattop

Class selector that defines the properties for the top tab-strip. It is a part of.tabcontainer, and contains the.activetabattopand.inactiveatbattopclass selectors. It is an invisible structural element.

x

x

.tabstripatbottom

Class selector that defines the properties for the bottom tab-strip. It is a part of.tabcontainer, and contains the.activetabattopand.inactiveatbattopclass selectors. It is an invisible structural element.

x

x

.tabcontent

Class selector that defines the content and border for a tab. It is common for top and bottom tabs, and is a part of.tabcontainer.

x

x

.activetabattop

Class selector that defines the position and appearance of a caption that appears at the top of the selected tab.

x

x

.activetabatbottom

Class selector that defines the position and appearance of a caption that appears at the bottom of the selected tab.

x

x

.inactivetabattop

Class selector that defines the position and appearance of a caption that appears at the top of an inactive tab.

x

x

.inactivetabatbottom

Class selector that defines the position and appearance of a caption that appears at the bottom of an inactive tab.

x

x

.tabcontentholder, .stackedtabcontentholder, .tabpageholder

Class selectors for the holders that form the structure of the tabs.

x

th

HTML tag that defines the properties of the header cell.

x

th label

Descendant selector that defines the properties of the label in a header cell.

x

th input

Descendant selector that defines the properties for input in a header cell.

x

td input

Descendant selector that defines the properties for the label in a table cell.

x

tr, td

Group selector that defines the properties for rows and cells. It is an invisible construct and should not be customized.

x

thead

HTML tag that defines the properties of the header row.

x

.oddrow, .evenrow

Group selector that defines the properties of rows of a Table control in Process Platform XForms. Here, it specifies a uniform row height for all types of grids. The height must be specified in pixels.

x

.data

Class selector applicable to a Table control that distinguishes it as a data-entry table, in which atleast one column is configured for user input through an Input or Select control.

x

x

.data td

Descendant selector that defines the properties for cells in a data-entry table.

x

x

.data th

Descendant selector that defines the properties for header cells in a data-entry table.

x

x

.data .oddrow

Descendant selector that defines the properties for odd rows in a data-entry table.

x

x

.data .evenrow

Descendant selector that defines the properties for even rows in a data-entry table.

x

x

.data .fieldsbox

Descendant selector that defines the properties for a field box in a data-entry table. This is an invisible construct and should not be customized.

x

.data .input

Descendant selector that defines the properties for an input box in a data-entry table.

x

x

.data .output

Descendant selector that defines the properties for an output box in a data-entry table.

x

x

.data .error

Descendant selector that defines the properties for an input box in a data-entry table, when the input box contains incorrect values.

x

.data input

Descendant selector that defines the properties for an input object and is applicable to the Check control in a data-entry table. It is an invisible construct and should not be customized.

x

.data .lookup

Descendant selector that defines the properties for zoom (lookup) buttons positioned next to input boxes in a data-entry table.

x

.data .selectbox

Descendant selector that defines the properties of the Select control in a data-entry table. It is an invisible construct and should not be customized.

x

.data .ifocus

Descendant selector that defines the properties for an input box that is in focus, in a data-entry table.

x

.navigational

Class selector applicable to the Table control that distinguishes it as a navigational table, in which all columns are configured to navigate to a synchronized dialog (related view). Clicking any row opens the synchronized dialog.

x

x

.navigational td

Descendant selector that defines the properties for cells in a navigational table.

x

x

.navigational th

Descendant selector that defines the properties for header cells in a navigational table.

x

x

.navigational .oddrow

Descendant selector that defines the properties for odd rows in a navigational table.

x

x

.navigational .evenrow

Descendant selector that defines the properties for even rows in a navigational table.

x

x

.navigational .input

Descendant selector that defines the properties for an Input control in a navigational table.

x

.navigational .lookup

Descendant selector that defines the properties for zoom (lookup) buttons positioned next to input boxes in a data-entry table.

x

.display

Class selector applicable to the Table control in Process Platform XForms that distinguishes it as a 'display table', in which all columns are configured to display information.

x

x

.display td

Descendant selector that defines the properties for cells in a display table.

x

x

.display th

Descendant selector that defines the properties for header cells in a display table.

x

x

.display .oddrow

Descendant selector that defines the properties for odd rows in a display table.

x

x

.display .evenrow

Descendant selector that defines the properties for even rows in a display table.

x

x

.display .input

Descendant selector that defines the properties for Input controls in a display table.

x

x

.display .lookup

Descendant selector that defines the properties for zoom (lookup) buttons positioned next to input boxes in a display table.

x

.selectbox , eibus\:dropdown

Group selector that defines the eibus tag-level style for a Select control.

x

x

.listbox

Class selector that defines the style for the container of a List control.

x

x

.selectfield

Class selector that defines the style for the input field and the drop-down list button in the.selectboxclass. It does not affect the drop-down list options.

x

.selectdropdown

Class selector that defines the container for the drop-down list that displays when you click the Select control. It exists at the body-tag level and not at the levels lower than that of the.selectboxclass.

x

.option

Class selector that defines all options in the.selectdropdownand.listboxclasses.

x

.optionselected

Class selector that defines the selected options in the.selectdropdownand.listboxclasses. The selected options are highlighted using the color defined in the.highlightclass. You can specify a new color and override the highlight color.

x

.selectfield input

Group selector that defines the input box that contains all selected options. Do not customize the input box as its appearance changes with the mode and state of the Select control.

x

x

.selectfield input.input, .selectfield input.output

Group selector used for maintaining proper cascade of Select control widths. For customizeddefault.cssfiles, add the selector and use the border-right width value specified for the.selectfieldinput selector.

x

.selectfield button

Group selector that defines the button that invokes the drop-down list. Do not customize this button as its appearance changes with the mode and state of the Select control.

x

.selectfield button.closed

Group selector that defines the closed state of the button that invokes the drop-down list. The drop-down list does not display in this state.

x

.selectfield button.open

Group selector that defines the open state of the button that invokes the drop-down list. The drop-down list is displayed in this state.

x

.selectfield button label

Group selector that specifies the label of the button. It is hidden by default.

x

.selectclose

Class selector that defines the area spanning the drop-down list that captures mouse clicks.

x

.selectbox.disabled

Class selector that defines the appearance of a disabled Select control.

x

.selectbox.disabled button.closed

Descendant selector that defines the appearance of a button in a disabled Select control.

x

.input.selectdropdown

Class selector that defines the position of a Select control. Do not customize it.

x

.toolbar

Class selector that specifies the position and appearance of the toolbar.

x

.toolbar span

Descendant selector that defines the position and appearance of a span in the toolbar.

x

#modallayer

Id selector that defines the properties of the covering DIV that functions as the modal layer for the Uniform Feedback Object - Process Platform Dialog. Customization, other than the modification of the background-color, are not recommended.

x

.dialogcontainer

Class selector that defines position and appearance of the dialog area of the Uniform Feedback Object - Process Platform Dialog.

x

fb_message

Id selector that defines common properties for the message that displays in the Uniform Feedback Object. This can be further contextualized separately for notification, error, and Process Platform Dialog messages. This is always a paragraph and can contain inline elements such aslabelandlink.

x

#fb_message label

Descendant selector that defines the presentational properties for the label inside the#fb_message. selector.

x

.dialogcontainer p#fb_message

Contextualized selector for#fb_messagecoming in dialogs.

x

.fb_wrapper

Id selector that defines the position and appearance of the container for all Uniform Feedback Object Process Platform Dialogs and the stacked list of error and notification messages. It is recommended not to customize it.

x

#feedback_wrapper_detail

Id selector that defines the z-index of the wrapper for all Uniform Feedback Object Process Platform Dialogs and the stacked list of error and notification messages. The wrapper comes around the container for Uniform Feedback Object dialogs.

x

.feedbackbox

Class selector that defines the position and appearance of primary holders for the Uniform Feedback Object - Process Platform Dialogs. These holders contain the title bar(#fb_titlebar) and the message containers(#fb_container).

x

.feedbackbox p

Descendant selector that defines the appearance of paragraphs inside thefeedbackboxcontainer for the Uniform Feedback Objects - Process Platform Dialogs.

x

.feedbackbox #fb_titlebar

Descendant selector that defines the position and appearance of the title bar of the Uniform Feedback Objects - Process Platform Dialogs, error messages, and notification messages.

x

.feedbackbox #fb_titlebar h1

Descendant selector that defines the position and appearance of the heading that appears in titlebar of the Uniform Feedback Objects - Process Platform Dialogs, error messages, and notification messages.

x

.feedbackbox #fb_buttons, .fb_notifybox #fb_buttons, .fb_errorbox #fb_buttons, .fb_wrapper #fb_buttons

Descendant selectors that define the position and appearance of buttons of the Uniform Feedback Objects - Process Platform Dialogs, error messages, and notification messages.

x

#fb_buttons img

Descendant selectors that define the position and appearance of images in the Uniform Feedback Objects - Process Platform Dialogs, error messages, and notification messages.

x

.feedbackbox #fb_container, .dialogcontainer #fb_container

Descendant selectors that define the position and appearance of the container in a Uniform Feedback Object. This can be further contextualized separately for Process Platform Dialogs, error messages, and notification messages.

x

#fb_fbdetail #fb_message

Id selector that defines the common properties for the message that displays in a Uniform Feedback Object. This can be further contextualized separately for Process Platform Dialogs, error messages, and notification messages. This is always a paragraph and can contain inline elements such aslabelandlink.

x

.feedbackbox iframe

Descendant selector that defines the presentational properties for the iframe inside thefeedbackboxselector.

x

.feedbackbox #fb_controlbox, #fb_controlbox

Descendant selector that defines the position and appearance of the control box inside thefeedbackboxselector. The control box contains the button that appears in the message area of the Uniform Feedback Object - Process Platform Dialog.

x

.feedbackbox #fb_controlbox button, #fb_controlbox button, .dialogcontainer button

Descendent selector that defines the position and appearance of the button that appears in the message area of Uniform Feedback Objects.

x

.dialogcontainer .input

Descendent selector that defines the position and appearance of the button that appears in the message area of the Uniform Feedback Object - Process Platform Dialog.

x

.feedbackbox #fb_controlbox #extender

Descendent selector that defines the position and appearance for the extender that appears in the message area of the Uniform Feedback Object - Process Platform Dialog. This extender has links to show More/Less.

x

.feedbackbox #fb_controlbox #extender a

Descendent selector that defines the position and appearance for the links inside the extender (show More/Less) that appear in the message area of the Uniform Feedback Object - Process Platform Dialogs.

x

#fb_extension

ID selector that defines the container for the area that can be expanded and collapsed in the SOAP Fault details message.

x

#fb_extension div#fb_details

Descendent selector that defines the properties of the details container, located inside the area that can be expanded and collapsed in the SOAP Fault details message .

x

#fb_status

ID selector that defines the position and appearance of the Uniform Feedback Object that indicates the status - status message.

x

#fb_status #fb_titlebar

Descendant selector that defines the position and appearance of the titlebar of the Uniform Feedback Object - status message.

x

#fb_status #fb_titlebar h1

Descendant selector that defines the position and appearance of the heading that appears in the titlebar of the Uniform Feedback Object - status message.

x

#stackListWrapper

Id selector to set the position and appearance of the wrapper of a stacked list of Uniform Feedback Object error and notification messages.

x

#stackListHeader

Id selector to set the position and appearance of the header of a stacked list of the Uniform Feedback Objects - error messages and notification messages.

x

#stackListHeader label, #stackListHeader label em, #stackListHeader span, #stackListHeader span img, #stackListHeader #fb_pinImage

Descendant selectors to set the position and appearance of the various tags in the header of a stacked list of the Uniform Feedback Objects - error messages and notification messages.

x

span.notificationdisplay *, span.errordisplay *

Class selectors for defining the properties of all tags, included in notification and error messages, that display in the Stacked list header.

x

.stackListContainer

Class selector for the container that holds multiple Uniform Feedback Objects (notification and error messages), when they display as a list.

x

.fb_notifybox

Class selector for the position and appearance of the Uniform Feedback Object - notification message.

x

.fb_notifybox #fb_titlebar

Descendant selector that defines the position and appearance of the titlebar of the Uniform Feedback Object - notification message.

x

.fb_notifybox #fb_titlebar h1

Descendant selector that defines the position and appearance of the heading that appears in the titlebar of the Uniform Feedback Object - notification message.

x

.fb_notifybox #fb_container

Descendant selector that is contextualized for the Uniform Feedback Object - notification message - to define the position and appearance of the container of the notification message.

x

.fb_notifybox #fb_container p#fb_message

Contextualized id selector that defines common properties of the message area in the Uniform Feedback Object - notification message. This is always a paragraph and can contain inline elements such aslabelandlink.

x

.fb_notifybox #fb_container p#fb_message label

Contextualized id selector that defines common properties for the label in the message area of the Uniform Feedback Object - notification message. This is always a paragraph and can contain inline elements such aslabelandlink.

x

.fb_notifybox #fb_controlbox button

Selector for the button that appears in the message area of the Uniform Feedback Object - notification message.

x

.fb_errorbox

Selector for the position and appearance of the Uniform Feedback Object - error message.

x

.fb_errorbox #fb_titlebar

Descendant selector that defines the position and appearance of the titlebar of the Uniform Feedback Object - error message.

x

.fb_errorbox #fb_titlebar h1

Descendant selector that defines the position and appearance of the heading that appears in the titlebar of the Uniform Feedback Object - error message.

x

.fb_errorbox #fb_container

Descendant selector that is contextualized for Uniform Feedback Object (error messages) to define the position and appearance of the error message container.

x

.fb_errorbox #fb_container p#fb_message

Contextualized id selector that defines the common properties for the message area in the Uniform Feedback Object - error message. This is always a paragraph and can contain inline elements such aslabelandlink.

x

.fb_errorbox #fb_container p#fb_message label

Contextualized id selector that defines the common properties for the label in the message area of the Uniform Feedback Object - error message. This is always a paragraph and can contain inline elements such aslabelandlink.

x

.fb_errorbox #fb_controlbox button

Selector for the button that appears in the message area of the Uniform Feedback Object - error message.

x

.fb_notifybox a, .fb_notifybox a:active, .fb_errorbox a, .fb_errorbox a:active

Selectors for the default states of links in the Uniform Feedback Objects - error messages and notification messages.

x

.fb_notifybox a:hover, .fb_errorbox a:hover

Selectors for the state when the pointer rests (hovers) on links in error messages and notification messages.

x

.calendar

Class selector for presentational properties of the calendar control.

x

.calendartitle

Class selector for presentational properties of the calendar title.

x

.dayname, .defaultday, .offday, .currentday, .selectedday

Class selectors for presentational properties of different types of days in the calendar control.

x

.highlight

Class selector that defines the properties of highlighted items.

x

.data .highlight, .navigational .highlight, .display .highlight

Group selector that defines the properties of highlighted rows in grids. You can use these selectors to achieve different highlighting effects for each grid type available in Process Platform XForms.

x

.highlight input.input

Descendant selector that defines the appearance of an input box in a highlighted row. You can use it to specify the appearance of the input control in a highlighted row of the data-entry grid.

x

.ifocus

Class selector that defines the appearance of an input box when focused through mouse action or keyboard tab.

x

.data .highlight input.ifocus

Class selector that defines the appearance of the input box when highlighted through mouse action or keyboard tab, specifically for the data-entry grid. You can extend the same kind of customization to other grid types as well.

x

input.error, textarea.error

Group selector that defines the state of an input box and a Textarea control when they contain an incorrect value.

x

.selectbox.error

Class selector that defines the state of a Select control when it contains an incorrect value.

x

.selectbox.error input

Descendant selector that defines the state of a Check control when it contains an incorrect value. Do not customize it.

x

.selectbox.disabled input

Descendant selector that defines the disabled state of an input in a Select control. Do not customize it.

x

.left_align

Class selector that aligns elements to the left-hand side.

x

.right_align

Class selector that aligns elements to the right-hand side.

x

.center_align

Class selector that aligns elements to the center.

x

.error .right_align

Group selector applicable to situations where a right-aligned element contains an incorrect value.

x

.removed

Class selector that hides an element by setting its display property to none.

x



CAUTION:
When customizing style sheets, ensure that you maintain the cascade order of selectors to prevent errors. If you need to replace thedefault.csswith a custom version, it must contain all selectors to ensure the proper working of the Process Platform Interface.

Related reference

Customizing and Applying Cascading Style Sheets
Guidelines for Customizing Style Sheets
Cascading Style Sheets